<script setup>
import { ref, watch } from "vue";
import MapSettingTools from "./MapSettingTools.vue";
import MapSelectDialog from "./MapSelectDialog.vue";
import MapSettingKonva from "./MapSettingKonva.vue";
import { disinfectRoute, disinfectCharge } from "@/api/disinfect/map-setting";
import { ElMessage, ElMessageBox } from "element-plus";
import chargeIcon from "@/assets/images/common/charge_icon.png";

const konva = ref();

// 选择地图弹窗
const visible = ref(false);
const selectMap = {
  openDialog() {
    visible.value = true;
  },
  handleConfirm(item) {
    getMapData(item);
  },
};

// 列表默认展开类型
const openCollapse = ref("path");

// 地图数据
const mapId = ref(null);
const mapUrl = ref("");
function getMapData(data) {
  mapId.value = data.id;
  mapUrl.value = data.url;
}

// 路径数据
const pathData = ref([]);
const path = {
  preview(raw) {
    konva.value.previewPath(JSON.parse(raw));
  },
  async delete(id) {
    await ElMessageBox.confirm("确认继续操作吗", "警告");
    const { message } = await disinfectRoute.delete(id);
    ElMessage({ type: "success", message });
    getPathData(mapId.value);
    konva.value.clearLayer();
  },
};
async function getPathData(mid = mapId.value) {
  const response = await disinfectRoute.read({ mid });
  pathData.value = response.data.list;
}

// 路径数据
const chargeData = ref([]);
const charge = {
  preview(x, y, rotation) {
    konva.value.previewCharge(Number(x), Number(y), Number(rotation));
  },
  async delete(id) {
    await ElMessageBox.confirm("确认继续操作吗", "警告");
    const { message } = await disinfectCharge.delete(id);
    ElMessage({ type: "success", message });
    getChargeData(mapId.value);
    konva.value.clearLayer();
  },
};
async function getChargeData(mid = mapId.value) {
  const response = await disinfectCharge.read({ mid, rtype: "disinfect" });
  chargeData.value = response.data.list;
}
function chargePreview(item) {
  let { chargeY: x, chargeX: y, tiltAngle: rotation } = item;
  x = Number(x);
  y = Number(y);
  rotation = Number(rotation);
  if (rotation === 3.14) {
    rotation = 0;
  } else {
    rotation = 180 - (rotation * 180) / Math.PI;
  }
  konva.value.previewPoint(chargeIcon, [{ x, y, rotation }]);
}

watch(mapId, () => updateData());
function updateData() {
  getPathData(mapId.value);
  getChargeData(mapId.value);
}

// 工具栏状态
function toolsAction(id) {
  switch (id) {
    case "05":
      selectMap.openDialog();
      break;
    default:
      break;
  }
}
</script>

<template>
  <div class="flex">
    <div
      id="left-list"
      class="min-h-[calc(100vh-84px)] min-w-[240px] bg-[#f3f3f3] select-none shadow-2xl"
    >
      <div class="flex flex-col p-4 bg-white">
        <!-- 选择地图弹窗 -->
        <el-button type="primary" size="large" @click="selectMap.openDialog">
          选择地图
        </el-button>
        <MapSelectDialog
          v-model:visible="visible"
          @handle-confirm="selectMap.handleConfirm"
        ></MapSelectDialog>
      </div>
      <el-collapse v-model="openCollapse" accordion>
        <el-collapse-item title="路径列表" name="path">
          <div
            v-for="item in pathData"
            :key="item.id"
            data-test="path-item"
            class="h-10 w-[200px] px-3 flex justify-between items-center cursor-pointer hover:bg-[#f3f3f3]"
            @click="path.preview(item.raw)"
          >
            <span>{{ item.name }}</span>
            <el-button
              link
              size="small"
              type="danger"
              @click.stop="path.delete(item.id)"
            >
              删除
            </el-button>
          </div>
        </el-collapse-item>
        <!-- <el-collapse-item title="区域列表" name="area"> </el-collapse-item> -->
        <el-collapse-item title="充电点列表" name="charge">
          <div
            v-for="item in chargeData"
            :key="item.id"
            data-test="charge-point-item"
            class="h-10 w-[200px] px-3 flex justify-between items-center cursor-pointer hover:bg-[#f3f3f3]"
            @click="chargePreview(item)"
          >
            <span>{{ item.name }}</span>
            <el-button
              link
              size="small"
              type="danger"
              @click.stop="charge.delete(item.id)"
            >
              删除
            </el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="min-h-[calc(100vh-84px)] grow relative">
      <MapSettingKonva
        ref="konva"
        :map-id="mapId"
        :map-url="mapUrl"
        @confirm-success="updateData"
      ></MapSettingKonva>
      <MapSettingTools @action="toolsAction"></MapSettingTools>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-collapse-item__header),
:deep(.el-collapse-item__content) {
  padding-left: 20px;
}
</style>
